<template>
	<div>
		<van-sticky>
			<van-nav-bar title="搜索结果" left-text="返回" left-arrow @click-left="onClickLeft" sticky />
		</van-sticky>
		<van-search v-model="keywordsvalue" show-action label="歌曲" placeholder="请输入搜索关键词" @search="onSearch">
			<template #action>
				<div @click="onSearch">搜索</div>
			</template>
		</van-search>
		<van-cell v-for="(val,ind) in searchData" :key="ind" @click="getsongurlData(val)">
			<p>歌曲名称：{{val.name}}</p>
			<div style="float: right;">
				演唱者：<span v-if="val.ar.length != 1" v-for="(val1,ind1) in val.ar">{{val1.name}}、</span>
				<span v-else>{{val.ar[0].name}}</span>
			</div>
		</van-cell>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//搜索结果数据
				searchData: [],
				//搜索关键字
				keywordsvalue: ''
			};
		},
		created() {
			this.getsearchData();
			this.keywordsvalue = this.$route.query.keywords
		},
		methods: {
			//获取搜索结果数据
			async getsearchData() {
				let {
					data: ret
				} = await this.$http.get('/cloudsearch?keywords=' + this.$route.query.keywords)
				//console.log(ret)
				this.searchData = ret.result.songs
			},
			onClickLeft() {
				this.$router.back()
			},
			//获取歌曲播放url
			async getsongurlData(val) {
				let {
					data: ret
				} = await this.$http.get('/song/url?id=' + val.id)
				//console.log(ret)
				if (ret.code == 200) {
					//父页面数据
					let singernames = val.ar.map((item, index) => {
						return item.name;
					});
					singernames = singernames.join("、");
					this.$parent.currentSong.url = ret.data[0].url;
					this.$parent.currentSong.singer = singernames;
					this.$parent.currentSong.song = val.name;
				} else {
					this.$toast(ret.message);
				}
			},
			async onSearch() {
				let {
					data: ret
				} = await this.$http.get('/cloudsearch?keywords=' + this.keywordsvalue)
				//console.log(ret)
				this.searchData = ret.result.songs
			}
		}
	}
</script>

<style lang="less" scoped>
</style>
